<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="cache-control" content="no-cache" />
        <title>事件处理</title>
        <link rel="stylesheet" href="../../assets/less/base/main.css" />
        <link rel="stylesheet" href="../../assets/less/message/index.css" />
    </head>

    <body>
        <div id="app"></div>
        <script src="../../config.js"></script>
        <script src="../../assets/js/main.js" type="module"></script>
        <script src="../../assets/lib/signalr.min.js"></script>
        <script type="module">
            // 右侧图表页面ID
            const _RIGHT_CHART_PAGE_NAME_ = '大屏右侧数据面板'
            // 创建Vue实例
            new Vue({
                el: '#app', // 绑定元素
                data: {
                    // 显示弹窗
                    visible: false,
                    // 事件队列
                    alarmList: [],
                    // 默认显示设备相关内容
                    showContent: 'device',
                    // 显示弹窗
                    modalVisible: false,
                    // 提交按钮加载中效果
                    loading: false,
                    // 是否派单
                    isDispatch: true,
                    // 工单信息
                    orderRecord: {},
                    // 用户列表
                    userList: [],
                    // 优先级列表
                    levelList: [],
                    // 搜素事件标题
                    searchTitle: '',
                    // 事件信息
                    record: {},
                    // 当前选中第几个事件
                    eventIndex: 0,
                    // 地图对象
                    map: null,
                    // 可视化Id
                    topologyId: '',
                    // 是否显示
                    isShow: false,
                    // 自动报警加载中效果
                    alarmModalLoading: false,
                    // 显示左侧地图
                    isShowLeft: false,
                    // 显示左箭头
                    leftArrow: true,
                    // 已派单
                    dispatchedOrders: false,
                    // 关联视频
                    relationVideo: []
                },
                mounted() {
                    // 获取人员列表
                    this.getUserList()
                    this.modalVisible = true
                },
                methods: {
                    // 工单信息
                    getWorkeOrder() {
                        // 获取工单等级列表
                        var levelObj = this.$common.order.getOrderLevel()
                        this.levelList = this.$common.order.getObjKeyValue(levelObj)
                        if (this.dispatchedOrders && this.$util.isNotEmpty(this.record.workOrder)) {
                            this.orderRecord = this.record.workOrder
                        } else {
                            // 区分事件内容的图片和文本
                            this.orderRecord = this.$util.formatMessageOrderData(this.record)
                            // 默认工单等级
                            this.orderRecord.level = 1
                            // 获取明天的时间
                            var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
                            // 默认截止时间
                            this.orderRecord.endTime = tomorrow
                            // 默认选中第一个处理人
                            if (this.$util.isNotEmpty(this.userList)) {
                                this.orderRecord.handler = this.userList[0].name
                            }
                        }
                    },
                    // 清除组态和地图
                    clearMapAndDesign() {
                        // 清空组态
                        this.topologyId = ''
                        // 组态设置为不显示
                        this.isShow = false
                        // 重置数据
                        this.record = {}
                        // 清空工单的内容
                        this.orderRecord = {}
                    },
                    // 显示报警事件设备的位置
                    showMessageAlarmInfo(record) {
                        let device = record.device

                        if (this.$util.isEmpty(device)) {
                            return
                        }
                        // 显示地图
                        let position = device.position
                        let linkedData = device.extend

                        if (linkedData) {
                            // 关联视频
                            this.relationVideo = linkedData.roundVideo ? linkedData.roundVideo.split(',') : []
                            // 关联定位页面
                            let locationPage = linkedData.locationPage ? linkedData.locationPage.substring(linkedData.locationPage.lastIndexOf(':') + 1, linkedData.locationPage.length) : ''
                            if (locationPage) {
                                let pageArr = locationPage.split(',')
                                if (this.$util.isNotEmpty(pageArr) && pageArr.length > 2) {
                                    this.isShow = true
                                    this.isShowLeft = true
                                    this.$nextTick(() => {
                                        // 重新加载iframe组态
                                        this.topologyId =
                                            this.$util.getServerUrl() + location.pathname + '#/design/modalPreview?topologyId=' + pageArr[0] + '&designType=local&locationPage=' + pageArr[1] + ',' + pageArr[2]
                                    })
                                }
                            } else if (this.$util.isNotEmpty(position)) {
                                this.isShowLeft = true
                                // 显示报警事件设备地图位置
                                this.showMessageAlarmMap(position)
                            }
                        } else if (this.$util.isNotEmpty(position)) {
                            this.isShowLeft = true
                            // 显示报警事件设备地图位置
                            this.showMessageAlarmMap(position)
                        }
                    },
                    // 显示报警事件设备地图位置
                    showMessageAlarmMap(position) {
                        // 初始化地图
                        if (typeof window.BMap === 'undefined' || typeof window.inMap === 'undefined') {
                            if (location.protocol === 'https:') window.HOST_TYPE = 1
                            this.$util.loadJs('/inmap/baiduApi3.0.js').then(() => {
                                this.$util.loadJs('/inmap/inmap.min.js').then(() => {
                                    this.$nextTick(() => {
                                        this.initMap(position)
                                    })
                                })
                            })
                        } else {
                            this.$nextTick(() => {
                                this.initMap(position)
                            })
                        }
                    },
                    // 初始化地图
                    initMap(position) {
                        var that = this
                        that.map = new window.inMap.Map({
                            id: 'alarmPositionModalId',
                            // skin: 'Blueness',
                            center: [105.001969, 34.393258],
                            zoom: {
                                value: 5,
                                show: true,
                                max: 18,
                                min: 5
                            }
                        })

                        // 是否存在经纬度 存在则显示定位
                        if (position && position.includes(',')) {
                            let lnglatArr = position.split(',')
                            this.setMapMarkler(lnglatArr[0], lnglatArr[1])
                        }
                    },
                    // 设置地图坐标
                    setMapMarkler(lng, lat) {
                        this.map.clearAllLayer()
                        var imgOverlay = new window.inMap.ImgOverlay({
                            tooltip: {
                                show: true,
                                formatter: '{name}'
                            },
                            style: {
                                normal: {
                                    icon: require('/public/img/deviceMap/map_position.png'),
                                    width: 20,
                                    height: 20,
                                    offsets: {
                                        top: '-100%',
                                        left: '-50%'
                                    }
                                }
                            },
                            data: [
                                {
                                    name: this.record.device.name,
                                    geometry: { type: 'Point', coordinates: [lng, lat] },
                                    style: { size: 15 }
                                }
                            ]
                        })
                        this.map.add(imgOverlay)
                        var point = new window.BMap.Point(lng, lat)
                        this.map.getMap().centerAndZoom(point, 16)
                        // 创建文本标注
                        var label = new window.BMap.Label(this.record.device.name, {
                            position: point
                        })
                        // 自定义文本标注样式
                        label.setStyle({
                            color: '#515a6e',
                            border: '0',
                            backgroundColor: 'transparent',
                            fontSize: '12px'
                        })
                        this.map.getMap().addOverlay(label)
                    },
                    // 是否派单
                    handleChangeDispatch(val) {
                        this.isDispatch = val
                    },
                    // 获取人员列表
                    getUserList() {
                        this.$util.data.getUserList(res => {
                            if (res.code === 0) {
                                this.userList = this.$util.getArrData(res.result)
                            }
                        })
                    },

                    // 是否误报
                    changeFalsePositive(val) {
                        this.record.falsePositive = val
                    },
                    // 处理
                    handleConfirm() {
                        // 事件派单
                        if (this.isDispatch && !this.dispatchedOrders) {
                            this.onOrderSubmit()
                        }
                        // 事件确认
                        if (this.$util.isEmpty(this.record.confirmor)) {
                            this.record.confirmor = this.$util.cookies.get('uuid')
                            this.record.falsePositive = JSON.parse(this.record.falsePositiveStr)
                            // 事件确认提交
                            this.handleConfirmMeesage([this.record], false)
                        }
                    },

                    // 事件确认提交
                    handleConfirmMeesage(list) {
                        this.alarmModalLoading = true
                        this.messageApi.updateMessages(list).then(res => {
                            this.alarmModalLoading = false
                            if (res.code !== 0) {
                                this.$util.msgError('事件确认失败！' + res.Msg)
                                return
                            }
                            this.$Message.success('事件确认成功！')
                            // 批量确认时关闭弹窗
                            this.onCancel()
                        })
                    },
                    // 事件派单
                    onOrderSubmit() {
                        var data = this.$cloneDeep(this.orderRecord)
                        // 获取事件派单的表单信息
                        var item = this.$util.formatOrderData(data)
                        this.workOrderApiV2.addOrder(item).then(res => {
                            if (res.code !== 0) {
                                this.$util.msgError(`事件指派工单失败，原因${res.Msg}`)
                            }
                            this.$Message.success('事件指派工单成功！')
                            // 批量确认时关闭弹窗
                            this.onCancel()
                            // 把事件内容的图片上传到工单
                            this.$util.uploadWorkOrderImg(data, res)
                        })
                    },
                    // 事件批量派单
                    onOrderBatchSubmit(list) {
                        this.workOrderApiV2.addOrders(list).then(res => {
                            if (res.code !== 0) {
                                this.$util.msgError(`事件批量指派工单失败，原因${res.Msg}`)
                            }
                        })
                    },
                    hanldeDeviceInfo(item) {
                        if (this.$util.isEmpty(item)) {
                            this.$util.msgError(`关联设备异常为空`)
                            return
                        }
                        var topoId = ''

                        var linkedData = item.extend
                        if (linkedData && linkedData.page) {
                            // 截取可视化页面id
                            topoId = linkedData.page.substr(linkedData.page.lastIndexOf('=') + 1)
                        }

                        this.$router.push({
                            path: '/device/detail',
                            query: {
                                id: item.id,
                                name: item.identifier,
                                branch: this.$branchName,
                                topologyId: topoId,
                                fitView: true
                            }
                        })

                        this.$emit('cancel')
                    },
                    // 查看关联视频
                    clickLocationPage() {
                        // 通知需要显示报警弹窗
                        this.$EventBus.$emit('triggerVideoModal', {
                            videoTitle: this.record.title,
                            relationVideo: this.relationVideo
                        })
                    },
                    // 左右箭头切换
                    arrowChange(type) {
                        this.leftArrow = type !== 'left'
                        this.isShowLeft = type !== 'left'
                    },
                    // 关闭事件
                    onCancel() {
                        this.$emit('cancel')
                    },
                    // 取消前的回调
                    onBeforeCancel() {
                        return new Promise(resolve => {
                            // 关闭事件
                            this.onCancel()
                            resolve()
                        })
                    }
                }
            })
        </script>
    </body>
</html>
